<!--  -->
<template>
  <div class="search-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="搜索中心"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="main">
        <van-icon name="search" class="search" size="24"></van-icon>
        <input
          type="text"
          placeholder="搜你想搜"
          v-model="keyword"
          @input="handleInput"
        />
      </div>
      <div class="cancel" v-if="keyword" @click="cancelSearch">取消</div>
    </div>
    <!-- 联想词列表 -->
    <div class="assoication" v-if="keyword">
      <van-list v-if="list.length">
        <van-cell
          icon="search"
          v-for="item in list"
          :key="item.goods_id"
          :title="item.goods_name"
          class="nowrap"
          @click="toDetail(item.goods_id)"
        />
      </van-list>
      <div class="no-data" v-else>暂无搜索到的商品,请重试</div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, List, Cell } from "vant";
import { searchGoods } from "@/network/goods";
export default {
  data() {
    return {
      keyword: "",
      list: [],
      timer: null,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [List.name]: List,
    [Cell.name]: Cell,
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    handleInput() {
      clearTimeout(this.timer);
      if (this.keyword) {
        this.timer = setTimeout(() => {
          this.getSearchGoods(this.keyword);
        }, 500);
      } else {
        this.cancelSearch();
      }
    },
    // 取消搜索
    cancelSearch() {
      this.list = [];
      this.keyword = "";
    },
    //去详情页面
    toDetail(id){
      this.$router.push({name:'Detail',params:{id}})
    },
    //获取联想关键词
    async getSearchGoods(query) {
      const res = await searchGoods(query);
      if (res.message) {
        this.list = res.message;
      }
    },
  },
};
</script>
<style scoped>
.search-container {
  padding-top: 46px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.search-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
/* 搜索框 */
.search-box {
  display: flex;
  padding: 10px;
  font-size: 16px;
}
.search-box .main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 4px 0;
  border: 1px solid #ccc;
}
.search-box .main .search {
  margin-left: 6px;
}
.search-box .main input {
  width: 100%;
  margin-left: 10px;
}
.search-box .cancel {
  padding: 4px 8px;
  margin-left: 10px;
  color: #fff;
  background-color: #ff6a00;
}
.van-cell__left-icon {
  font-size: 18px;
}
.van-cell__title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 10px;
}
.assoication{
  padding:10px;
  background-color: #fff;
}
.no-data{
  font-size: 18px;
  color:red;
  font-weight:bold;
  
}
</style>